<template>
  <view class="rate-page">
    <view class="card">
      <text class="title">为本次服务打分</text>
      <view class="stars">
        <text v-for="i in 5" :key="i" class="star" :class="{ active: i <= rating }" @tap="setRate(i)">★</text>
      </view>
      <textarea class="comment" v-model="comment" placeholder="说说本次服务的体验（选填，最多1000字）" :maxlength="1000" />
      <button class="submit" @tap="submit" :disabled="submitting">提交评价</button>
    </view>
  </view>
</template>

<script>
import { createFeedback } from '@/api/feedback'
export default {
  data(){
    return { orderId: '', rating: 5, comment: '', submitting: false }
  },
  onLoad(q){ this.orderId = q && q.orderId },
  methods:{
    setRate(i){ this.rating = i },
    async submit(){
      if (!this.orderId) return this.$modal && this.$modal.msgError ? this.$modal.msgError('缺少订单ID') : uni.showToast({ title:'缺少订单ID', icon:'none' })
      if (!this.rating || this.rating < 1 || this.rating > 5) return this.$modal && this.$modal.msgError ? this.$modal.msgError('请选择1-5星评分') : uni.showToast({ title:'请选择1-5星评分', icon:'none' })
      try{
        this.submitting = true
        const res = await createFeedback({ orderId: Number(this.orderId), rating: this.rating, comment: this.comment })
        this.submitting = false
        if (res && (res.code === 200 || res.success)){
          if (this.$modal && this.$modal.msgSuccess) this.$modal.msgSuccess('评价成功'); else uni.showToast({ title:'评价成功', icon:'success' })
          setTimeout(()=>{ uni.navigateBack() }, 600)
        } else {
          const msg = res && res.msg ? res.msg : '提交失败'
          if (this.$modal && this.$modal.msgError) this.$modal.msgError(msg); else uni.showToast({ title: msg, icon:'none' })
        }
      }catch(e){
        this.submitting = false
        if (this.$modal && this.$modal.msgError) this.$modal.msgError('网络错误，请重试'); else uni.showToast({ title:'网络错误，请重试', icon:'none' })
      }
    }
  }
}
</script>

<style scoped>
.rate-page{ min-height:100vh; background:#f6f7fb; padding:24rpx }
.card{ background:#fff; border-radius:16rpx; padding:24rpx; box-shadow:0 8rpx 24rpx rgba(0,0,0,.06) }
.title{ font-size:32rpx; font-weight:700; color:#111; display:block; margin-bottom:24rpx }
.stars{ display:flex; gap:12rpx; margin-bottom:16rpx }
.star{ font-size:48rpx; color:#ddd }
.star.active{ color:#ffb300 }
.comment{ width:100%; min-height:180rpx; background:#f9fafb; border-radius:12rpx; padding:16rpx; font-size:28rpx }
.submit{ width:100%; height:88rpx; background:#1989fa; color:#fff; border:none; border-radius:10rpx; margin-top:20rpx }
</style>


